<template>
	<navigatorComp title="祈福记录" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<mescroll-uni :height="height + 'px'" :up="upOption" @init="mescrollInit" @down="myDownCallback" @up="upCallback">
		<view class="qifuList">
			<view class="qifuItem" v-for="(item, index) in qifuList">
				<view class="qifu_top">
					<view class="qifu_name">{{item.auspiciousnessPeopleName}}</view>
					<view class="qifu_time">{{ formatTimestamp(item.auspiciousnessTime) }}</view>
				</view>
				<view class="qifu_content">
					{{item.auspiciousnessContent}}
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import navigatorComp from '/components/navigator/index.vue';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import {
		formatTimestamp
	} from '@/utils/time';
	import WorshipApi from '@/API/worship';
	const worshipApi = new WorshipApi();

	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(); // 调用mescroll的hook
	const upOption = {
		page: {
			size: 10 // 每页数据的数量
		},
		noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
		// empty: {
		// 	use: false //不显示空图
		// }
	};
	const lastId = ref(0); //最后一个元素的id
	const height = ref(0);
	const qifuList = ref([]);

	onLoad(() => {
		// #ifdef MP-WEIXIN
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight;
		// #endif

		// #ifdef APP || H5
		console.log(getApp().globalData.bottom, getApp().globalData.navHeight, )
		height.value =
			uni.getSystemInfoSync().screenHeight -
			getApp().globalData.bottom -
			getApp().globalData.navHeight -
			uni.upx2px(88);
		// #endif
		console.log(height.value)
	});

	/**
	 * 上拉加载
	 */
	const upCallback = (mescroll) => {
		worshipApi
			.getAuspiciousnessRecord({
				latestId: lastId.value
			})
			.then((res) => {
				const curPageData = res.data.auspiciousnessList || []; // 当前页数据
				console.log(curPageData);
				if (lastId.value === 0) qifuList.value = []; //如果是第一页需手动制空列表
				qifuList.value = qifuList.value.concat(curPageData); //追加新数据\
				if (curPageData.length > 0) {
					lastId.value = curPageData[curPageData.length - 1].auspiciousnessId;
				}
				mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			})
			.catch(() => {
				mescroll.endErr(); // 请求失败, 结束加载
			});
	};

	const myDownCallback = (mescroll) => {
		lastId.value = 0;
		downCallback();
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.qifuList {
		padding: 32rpx;

		.qifuItem {
			padding: 32rpx;
			box-sizing: border-box;
			width: 100%;
			height: auto;
			background: #292b2a;
			border-radius: 8rpx;
			margin-bottom: 24rpx;

			.qifu_top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.qifu_name {
					font-weight: 400;
					font-size: 32rpx;
					color: #f3e0bb;
					line-height: 44rpx;
				}

				.qifu_time {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
				}
			}

			.qifu_content {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 42rpx;
				margin-top: 16rpx;
				text-align: justify;
				word-break: break-all;
			}
		}
	}
</style>